<template>
	<view class="goods" v-if="Object.keys(goodDetail).length">
		<swiper
			class="goods-swiper"
			:indicator-dots="showDots"
			:autoplay="true"
			:interval="3000"
			:duration="1000">
			<swiper-item v-for="(item, index) in goodsImgsList" :key="index">
				<image class="goods-swiper-img" :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="goods-info">
			<view class="goods-info-name uni-h5 text-overflow-two">
				{{goodDetail.name}}
			</view>
			<view class="flex-center-between">
				<text class="good-price color-important">
					<text>¥</text>
					<text class="uni-h3">{{goodDetail.price}}</text>
					<text>/年</text>
				</text>
				<view class="year-limit">一年起租</view>
			</view>
		</view>
		<view class="goods-select flex-center-between" @click="toggleSelectOption(true)">
			<view>
				<text>选择</text>
				<text class="text-color-grey">套餐</text>
				<!-- <text class="text-color-grey">租期 数量 套餐</text> -->
			</view>
			<uni-icon type="more" size="30"></uni-icon>
		</view>
		<view class="goods-param">
			<view class="goods-param-tit flex-center-around">
				<text :class="actived ? 'tit' : 'tit tit-actived'" @click="toggleParam(0)">
					租赁流程
				</text>
				<text :class="actived ? 'tit tit-actived' : 'tit'" @click="toggleParam(1)">
					属性参数
				</text>
			</view>
			<view v-show="!actived" class="goods-param-process">
				<view v-for="(item,index) in processList" :key="index">
					<view class="flex-center">
						<image class="goods-param-process-img" :src="item.icon" mode="aspectFill"></image>
						<text>{{item.text}}</text>
					</view>
					<uni-icon v-if="index !== processList.length-1" class="arrowthindown" type="arrowthindown" color="#999" size="16"></uni-icon>
				</view>
			</view>
			<view v-show="actived" class="goods-param-prop">
				<view
					class="goods-param-prop-item flex-center"
					v-for="(item, index) in attributeList"
					:key="index">
					<text class="goods-param-prop-item-name">
						{{item[0]}}
					</text>
					<text class="goods-param-prop-item-value">
						{{item[1]}}
					</text>
				</view>
			</view>
		</view>
		<!-- <view class="goods-detail" v-html="richText"></view> -->
		<rich-text class="rich-text" :nodes="richText"></rich-text>
		
		<view class="goods-mask" v-show="showPopupBottom" @touchmove.stop @click="toggleSelectOption(false)"></view>
		
		<view class="goods-popup" v-show="showPopupBottom" @touchmove.stop @click.stop>
			<view class="flex-center">
				<image class="select-img" src="../../static/images/img01.png" mode="aspectFill"></image>
				<view class="select-info">
					<view class="select-info-name text-overflow-two">
						{{goodDetail.name}}
					</view>
					<view class="select-info-type">
						型号：{{goodDetail.attribute['型号']}}
					</view>
					<view class="select-info-price">
						维护费：{{goodDetail.upkeep}}
					</view>
				</view>
			</view>
			<view class="select-type">
				<view class="select-type-tit">套餐</view>
				<text
					v-for="(item, index) in typePriceList" :key="index"
					:class="index === typeActived ? 'select-type-item type-actived': 'select-type-item'"
					@click="selectType(index)">
					{{item + '元/'}}
					<text v-for="(item2, index2) in typeNameList" :key="index2">
						<text v-if="index === index2">
							{{item2}}
						</text>
					</text>
				</text>
			</view>
			<view class="select-number">
				<view class="select-number-tit">数量</view>
				<view class="select-number-con">
					<uni-number-box
						:value="selectNumber"
						:min="1"
						:max="goodDetail.stock"
						@change="changeGoodsNum">
					</uni-number-box>
					<text class="reserve">库存：{{goodDetail.stock}}</text>
				</view>
			</view>
			
		</view>
		<!--  #ifndef  MP-WEIXIN -->
		<!--  #endif -->
		<view class="goods-bottom flex-center-between">
			<view class="goods-bottom-price">
				<text>租金</text>
				<text class="color-important">
					<text>￥</text>
					<text class="uni-h3">{{totalMoney}}</text>
				</text>
			</view>
			<view v-if="goodDetail.attribute['租赁天数']" 
				class="goods-bottom-try" 
				@click="submit('tryout')">
				试租{{goodDetail.attribute['租赁天数']}}天
			</view>
			<view class="goods-bottom-confirm" @click="submit('order')">立即租赁</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="goods-bottom flex-center-between" v-if="goodDetail.attribute['租赁天数']">
			<view class="goods-bottom-price">
				<text>租金</text>
				<text class="color-important">
					<text>￥</text>
					<text class="uni-h3">{{goodDetail.attribute['租赁价格']}}</text>
				</text>
			</view>
			<view class="goods-bottom-try" @click="submit('tryout')">
				试租{{goodDetail.attribute['租赁天数']}}天
			</view>
		</view> -->
		<!--  #endif -->
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	import uniNumberBox from "../../components/uni-number-box.vue"
	export default {
		components: {
			uniNumberBox,
			uniIcon,
		},
		data() {
			return {
				isLogin: false,
				goodsId: '',
				goodDetail: {},
				goodsImgsList: [],
				showDots: false,
				showPopupBottom: false,
				typeNameList: [],
				typePriceList: [],
				attributeList: [],
				typeActived: 0,
				selectNumber: 1,
				richText: '',
				// tryoutDays: '',
				actived: 0, // 0:租赁流程;1属性参数:
				processList: [
					{
						icon: '../../static/images/goods-step1.png',
						text: '1.选择设备',
					},{
						icon: '../../static/images/goods-step2.png',
						text: '2.在线预付租金'
					},{
						icon: '../../static/images/goods-step3.png',
						text: '3.提交订单，系统审核'
					},{
						icon: '../../static/images/goods-step4.png',
						text: '4.物流发货'
					},{
						icon: '../../static/images/goods-step1.png',
						text: '5.上门安装调试设备'
					}
				],
				totalMoney: 0
			}
		},
		onLoad(option) {
			this.goodsId = option.id // 从路由里获取当前商品id
			this.gatGoodsDetail()
			
		},
		onShow() {
			let token = uni.getStorageSync('USER_INFO').token
			if (token) {
				this.isLogin = true
			}
		},
		methods: {
			/**
			 * 获取商品详情数据
			 */
			async gatGoodsDetail() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/shop/detail',
					data: { id: this.goodsId }
				})
				if (res.status === 1) {
					this.goodDetail = res.data.list
					this.goodsImgsList = 
						res.data.list.carousel && 
						res.data.list.carousel.split(',')
							.map(item=>{return this.$baseUrl + item})
					// this.tryoutDays = res.data.list.attribute['租赁天数']
					this.typeNameList = res.data.list.spec_name
					this.typePriceList = res.data.list.spec_price
					this.attributeList = Object.entries(res.data.list.attribute)
					this.showDots = this.goodsImgsList.length > 1 ? true : false
					const reg = new RegExp('/uploads','g')
					this.richText = this.goodDetail.content.replace(reg, this.$baseUrl+'/uploads')
					this.totalMoney = 
						parseInt(this.selectNumber) * 
						parseFloat(this.goodDetail.spec_price[this.typeActived]) + 
						parseFloat(this.goodDetail.upkeep)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 跳转到确认订单，并带上商品信息到路由
			 * @param {String} type
			 * 
			 * goodsId(String) ->商品id
			 * goodsName(String) ->商品名
			 * goodsType(String) ->商品型号
			 * goodsNum(String) ->商品数量
			 * goodsMaxNum(String) ->商品库存
			 * goodsPriceId(String) ->商品的种类id
			 * goodsPrice(String) ->商品价格
			 * goodsServerPrice(String) ->商品服务费
			 */
			submit(type) {
				if (!this.isLogin) {
					uni.navigateTo({url: '/pages/login/login'})
					uni.showToast({
						title: '登录后可见',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: type +
						'?goodsId=' + this.goodsId +
						'&goodsName=' + this.goodDetail.name +
						'&goodsImage=' + this.$baseUrl+this.goodDetail.pro_image +
						'&goodsType=' + this.goodDetail.attribute['型号'] +
						'&goodsNum=' + this.selectNumber +
						'&goodsMaxNum=' + this.goodDetail.stock +
						'&goodsPriceId=' + this.typeActived +
						'&goodsPrice=' + this.goodDetail.spec_price[this.typeActived] +
						'&goodsServerPrice=' + this.goodDetail.upkeep +
						'&leaseDays=' + this.goodDetail.attribute['租赁天数'] +
						'&leasePrice=' + this.goodDetail.attribute['租赁价格']
				})
			},
			/**
			 * 切换商品属性or流程
			 * @param {Number} index
			 */
			toggleParam(index) {
				this.actived = index
			},
			/**
			 * 显示or隐藏商品选择
			 * @param {Boolean} status
			 */
			toggleSelectOption(status) {
				this.showPopupBottom = status
			},
			/**
			 * 切换商品种类
			 * @param {Number} index
			 */
			selectType(index){
				this.typeActived = index
			},
			/**
			 * 改变商品数量
			 * @param {Number} e
			 */
			changeGoodsNum(e) {
				this.selectNumber = e
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
		},
		watch:{
			/**
			 * 监听选择商品数量
			 */
			selectNumber: function () {
				this.totalMoney = 
					parseInt(this.selectNumber) * 
					parseFloat(this.goodDetail.spec_price[this.typeActived]) + 
					parseFloat(this.goodDetail.upkeep)
			},
			/**
			 * 监听商品类别
			 */
			typeActived: function () {
				this.totalMoney = 
					parseInt(this.selectNumber) * 
					parseFloat(this.goodDetail.spec_price[this.typeActived]) + 
					parseFloat(this.goodDetail.upkeep)
			}
		}
	}
</script>

<style lang="scss">
	.goods{
		padding-bottom: 106rpx;
		.goods-swiper{
			height: 750rpx;
			.goods-swiper-img{
				width: 100%;
				height: 100%;
			}
		}
		
		.goods-info{
			padding: 20rpx 30rpx 50rpx;
			background: $uni-bg-color;
			.goods-info-name{
				line-height: 52rpx;
				width: 690rpx;
				margin: 0 auto 30rpx;
			}
			.year-limit{
				width: 119rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: $uni-font-size-sm2;
				color: $uni-text-color-inverse;
				background-image: linear-gradient(-45deg, #f6660c 0%, #ffa065 100%), linear-gradient(#ffa065, #ffa065);
				box-shadow: 0px 3px 7px 0px rgba(255, 134, 59, 0.35);
			}
		}
		
		.goods-select{
			padding: 0 30rpx;
			height: 100rpx;
			border-top: 1rpx solid $uni-border-color;
			background: $uni-bg-color;
			.text-color-grey{
				margin-left: 50rpx;
				color: $uni-text-color-grey;
			}
		}
		
		.goods-param{
			margin-top: 20rpx;
			background: $uni-bg-color;
			.goods-param-tit{
				padding-top: 20rpx;
				border-bottom: 1rpx solid $uni-border-color;
				.tit{
					line-height: 70rpx;
				}
				.tit-actived{
					color: $uni-color-theme;
					border-bottom: 2px solid $uni-color-theme;
				}
			}
			.goods-param-process{
				padding: 50rpx;
				&-img{
					height: 36rpx;
					width: 36rpx;
					padding: 22rpx;
					margin-right: 16rpx;
					border: 1rpx dotted $uni-border-color;
					border-radius: 50%;
				}
				.arrowthindown{
					padding: 0 28rpx;
				}
			}
			.goods-param-prop{
				padding: 0 30rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&-item{
					height: 108rpx;
					border-bottom: 1rpx solid $uni-border-color;
					&:last-child{
						border-bottom: none;
					}
					&-name{
						width: 160rpx;
						color: $uni-text-color-grey2;
					}
					&-value{
						margin-left: 50rpx;
					}
				}
			}
		}
		
		.goods-detail{
			margin-top: 20rpx;
			// padding: 30rpx 20rpx;
			background: $uni-bg-color;
		}
		
		.goods-bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			height: 106rpx;
			padding-left: 30rpx;
			border-top: 1rpx solid $uni-border-color;
			background: $uni-bg-color;
			&-price{
				width: 274rpx;
				height: 106rpx;
				font-size: $uni-font-size-sm2;
				overflow: hidden;
			}
			&-try,
			&-confirm{
				width: 238rpx;   
				line-height: 106rpx;
				text-align: center;
				color: $uni-text-color-inverse;
			}
			&-try{
				background: #4f4d55;
			}
			&-confirm{
				background: $uni-color-theme;
			}
		}
		
		.goods-mask{
			position: fixed;
			background: $uni-bg-color-mask;
			width: 100%;
			top: 0;
			bottom: 106rpx;
			left: 0;
			right: 0;
			z-index: 998;
			overflow: hidden;
			animation: showMask 0.2s ease;
		}
		
		.goods-popup{
			position: fixed;
			overflow: hidden;
			width: 100%;
			left: 0;
			bottom: 107rpx;
			z-index: 999;
			box-sizing: border-box;
			padding: 40rpx 30rpx 0;
			background: $uni-bg-color;
			animation: showPopop 0.2s ease;
			.select-img{
				width: 200rpx;
				height: 200rpx;
			}
			.select-info{
				width: 470rpx;
				margin-left: 20rpx;
				.select-info-name{
					line-height: 40rpx;
					margin-bottom: 40rpx;
				}
				.select-info-type{
					line-height: 40rpx;
					font-size: $uni-font-size-sm2;
					color: $uni-text-color-grey;
				}
				.select-info-price{
					line-height: 40rpx;
					font-size: $uni-font-size-sm2;
					color: $uni-text-color-grey;
				}
			}
			.select-type{
				margin-top: 30rpx;
				.select-type-tit{
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}
				.select-type-item{
					display: inline-block;
					height: 76rpx;
					line-height: 76rpx;
					background: $uni-bg-color-grey;
					padding: 0 30rpx;
					margin: 20rpx 30rpx 0 0;
					font-size: $uni-font-size-sm2;
					border-radius: $uni-border-radius-base;
				}
				.type-actived{
					background: $uni-color-theme;
					color: $uni-text-color-inverse;
				}
			}
			.select-number{
				margin-top: 30rpx;
				.select-number-tit{
					line-height: 40rpx;
				}
				.select-number-con{
					margin: 30rpx 0;
					display: flex;
					align-items: flex-end;
					.reserve{
						font-size: $uni-font-size-sm2;
						color: $uni-text-color-grey;
						margin-left: 20rpx;
					}

				}
			}
		}
		@keyframes showMask {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes showPopop {
			0% {
				transform: translateY(100%);
			}
			100% {
				transform: translateY(0%);
			}
		}
	}
</style>
